<template>
  <div style="width: 100%; height: 100%">
    <mapDiv ref="mapv"></mapDiv>

  </div>
</template>

<script>
import mapDiv from "@/components/map/map.vue";
// import { getZcTreeList, getZcList, getSsList } from "@/api/data/data.js";
// import { getNavigationMarkList } from "@/api/daping/daping.js";

import { getCenter } from "ol/extent";
import { Polygon, LinearRing } from "ol/geom";
import Feature from "ol/Feature";
import { aisDAta } from "@/assets/json/ais.js";
//  ispro = false;
export default {
  data() {
    return {
      options: {
        connectTimeout: 40000,
        clientId: "mqtitId-Home" + new Date().getTime(),
        username: "service_user",
        password: "admin123",
        // username: 'ship',
        // password: 'ship@2021.11.24',
        clean: false,
      },
      zoom: 0,
      cbmmsi: "",
    };
  },
  props: {
    type: { default: "all", type: String },
  },
  components: {
    mapDiv,
  },
  mounted() {
    this.$nextTick(() => {
      // this.addShipObj(aisDAta.map((item) => {return {...item,shipCog:item.hx}}));
    });
    if (this.type == "all") {
      // this.initMqtt();
      // this.addHbList();
      // this.getZcTreeList();
      // this.getSsDataList();
      // this.getCzData();
      // this.getqlData();
      // this.getmtData();
    }

    setTimeout(() => {
      //   this.mapShowInit(["ship"]);
    }, 100);
  },
  methods: {
    init() {
      console.log("mapInit");
      this.$refs.mapv.initdev();
    },
    initData(data) {
      // this.$refs.mapv.getClean("hb");
      data.forEach((item) => {
        item.location = [item.buoyLng, item.buoyLat];
        item.name = item.buoyName;
      })
      console.log(data, "data");

      this.$refs.mapv.addPoints(data, "hb", 0.5, "hb", 10, true);
    },

    addVideoTaskList(data, imgName, zIndex, tumc, show) {
      var layer = this.$refs.mapv.pointsMap[tumc || "video"];
      this.$refs.mapv.map.removeLayer(layer);
      this.$refs.mapv.addPoints(
        data,
        imgName || "camera",
        0.5,
        tumc || "video",
        zIndex || 200,
        show
      );
    },
    removeMapObj(type) {
      var layer = this.$refs.mapv.pointsMap[type];

      if (layer && layer.constructor === Array) {
        layer = layer[0];
      }
      this.$refs.mapv.map.removeLayer(layer);
    },
    addHbList() {
      getNavigationMarkList({
        pageNum: "1", //分页页码
        pageSize: "1000", //分页大小
      }).then((res) => {
        for (var index in res.data.rows) {
          res.data.rows[index].location = [
            res.data.rows[index].bouyLng,
            res.data.rows[index].bouyLat,
          ];
        }
        this.$refs.mapv.addPoints(
          res.data.rows,
          "FINAL_HB",
          0.5,
          "FINAL_HB",
          10
        );
      });
    },
    addShipObj(data) {
      var layer = this.$refs.mapv.pointsMap["ship"];
      var layer2 = this.$refs.mapv.pointsMap["shipxz"];
      this.$refs.mapv.map.removeLayer(layer);
      this.$refs.mapv.map.removeLayer(layer2);
      this.zoom = this.$refs.mapv.mapZoom;
      let xzList = [];
      let list = [];
      for (var index in data) {
        if (data[index].mmsi == this.cbmmsi) {
          xzList.push({
            ...data[index],
            location: [data[index].jd, data[index].wd],
            shipCog: data[index].hx,
          });
        } else {
          list.push({
            ...data[index],
            location: [data[index].jd, data[index].wd],
            shipCog: data[index].hx,
          });
        }
      }
      // console.log(xzList,'xzList');

      this.$refs.mapv.addPoints(list, "zc", 1, "ship", 10);
      if (xzList.length > 0) {
        // this.$refs.mapv.goCenter(xzList[0].location, this.zoom);
        this.$refs.mapv.addPoints(xzList, "zc_xz", 1, "shipxz", 12, true);
      }
    },
    mapClick(data) {
      this.$parent.mapClick(data);
      if (["ship", "shipxz"].indexOf(data.type) > -1) {
        this.$refs.mapv.getClean("shipxz");
        this.cbmmsi = data.data.mmsi;
        this.$refs.mapv.addPoints([data.data], "zc_xz", 1, "shipxz", 12, true);
      }
    },
    goCenter(location, zoom) {
      this.$refs.mapv.goCenter(location, zoom);
    },
    mapShowInit(typeList) {
      for (var key in this.$refs.mapv.pointsMap) {
        var obj = this.$refs.mapv.pointsMap[key];
        if (obj.constructor == Array) {
          for (var index in obj) {
            var cobj = obj[index];
            cobj.setVisible(false);
          }
        } else {
          if (key == "ship") {
            this.$refs.mapv.shipShow = false;
          }
          obj.setVisible(false);
        }
      }
      for (var key in typeList) {
        var obj = this.$refs.mapv.pointsMap[key];
        if (obj.constructor == Array) {
          for (var index in obj) {
            var cobj = obj[index];
            cobj.setVisible(true);
          }
        } else {
          if (key == "ship") {
            this.$refs.mapv.shipShow = true;
          }
          obj.setVisible(true);
        }
      }
    },
    mapShow(type) {
      var obj = this.$refs.mapv.pointsMap[type];
      if (obj.constructor == Array) {
        for (var index in this.$refs.mapv.pointsMap[type]) {
          var cobj = this.$refs.mapv.pointsMap[type][index];
          cobj.setVisible(!cobj.getVisible());
        }
      } else {
        if (type == "ship") {
          this.$refs.mapv.shipShow = !this.$refs.mapv.shipShow;
        }
        obj.setVisible(!obj.getVisible());
      }
    },
    getZcTreeList() {
      getZcTreeList().then((res) => {
        if (res.code == 200) {
          for (var index in res.data) {
            var data = res.data[index];
            for (var j in data.sonNodes) {
              // this.getZcList(data.sonNodes[j].);
              var sobj = data.sonNodes[j];
              for (var k in sobj.sonNodes) {
                if (sobj.sonNodes[k].dataSource == "HDPC") {
                  this.getZcList(
                    sobj.sonNodes[k].sourceTable,
                    sobj.sonNodes[k].dataStyle
                  );
                }
              }
            }
          }
        }
      });
    },
    getCzData() {
      var obj = {
        tableName: "t_jbxx_cz",
      };
      getZcList(obj).then((res) => {
        if (res.code == 200) {
          this.addMapObj(res.data.dataList, "t_jbxx_cz", "t_jbxx_cz", false);
        }
      });
    },
    getqlData() {
      var obj = {
        tableName: "t_bridge_info",
      };
      getZcList(obj).then((res) => {
        if (res.code == 200) {
          this.addMapObj(
            res.data.dataList,
            "t_bridge_info",
            "t_bridge_info",
            false
          );
        }
      });
    },
    getmtData() {
      var obj = {
        tableName: "t_wharf",
      };
      getZcList(obj).then((res) => {
        if (res.code == 200) {
          this.addMapObj(res.data.dataList, "t_wharf", "t_wharf", false);
        }
      });
    },
    getZcList(type, classType) {
      var obj = {
        xzqhbm: "3212",
        tableName: type,
      };
      getZcList(obj).then((res) => {
        if (res.code == 200) {
          this.addMapObj(
            res.data.dataList,
            res.data.tableName,
            classType,
            false
          );
        }
      });
    },
    getSsDataList() {
      getSsList().then((res) => {
        if (res.code == 200) {
          for (var i in res.data) {
            if (res.data[i].datalist.length > 0) {
              for (var j in res.data[i].datalist) {
                res.data[i].datalist[j].location = [
                  res.data[i].datalist[j].jd,
                  res.data[i].datalist[j].wd,
                ];
              }
              var type = "";
              if (res.data[i].type == "shorePower") {
                type = "t_shore_power";
              } else {
                type = "t_" + res.data[i].type;
              }
              this.$refs.mapv.addPoints(
                res.data[i].datalist,
                res.data[i].type,
                0.5,
                type,
                10
              );
            }
          }
        }
      });
    },
    getAddline(data, color, type) {
      this.$refs.mapv.pointsMap[type] = [];
      let locationList = [];
      setTimeout(() => {
        data.forEach((item, k) => {
          locationList.push(item.location);
        });
        this.$refs.mapv.addline(
          locationList,
          3,
          color || "#000000",
          data,
          type
        );
      }, 100);
    },
    addMapObj(data, type, icon, show = true, back = (n) => { }) {
      if (data && data.length > 0) {
        if (data[0].geom.indexOf("LINESTRING") > -1) {
          this.$refs.mapv.pointsMap[type] = [];
          for (var i in data) {
            var lineStr = data[i].geom
              .replaceAll("LINESTRING(", "")
              .replaceAll(")", "");
            var lineArray = lineStr.split(",");
            var lineData = [];
            for (var j in lineArray) {
              var obj = lineArray[j].split(" ");
              lineData.push(obj);
            }
            back(this.kuzxd(lineData));
            if (show) {
              this.$refs.mapv.addline(
                lineData,
                3,
                icon || "#000000",
                data[i],
                type
              );
            }
          }
        } else if (data[0].geom.indexOf("POINT") > -1) {
          for (var index in data) {
            data[index].location = data[index].geom
              .replaceAll("POINT(", "")
              .replaceAll(")", "")
              .split(" ");
          }
          if (data.length == 1) {
            this.$refs.mapv.goCenter(data[0].location, 14);
          }
          console.log(data, "data");
          this.$refs.mapv.addPoints(data, icon, 0.5, type, 10, show);
        } else if (data[0].geom.indexOf("POLYGON") > -1) {
          this.$refs.mapv.pointsMap[type] = [];

          for (var i in data) {
            var polygonStr = data[i].geom
              .replaceAll("POLYGON((", "")
              .replaceAll(")", "");
            var polygonStrArray = polygonStr.split(",");
            var polygonStrData = [];
            for (var j in polygonStrArray) {
              var obj = polygonStrArray[j].split(" ");
              obj[0] = Number(obj[0]);
              obj[1] = Number(obj[1]);
              polygonStrData.push(obj);
            }
            back(this.kuzxd(polygonStrData));

            if (show) {
              this.$refs.mapv.addPolygon(
                [polygonStrData],
                data[i],
                data[i].mc,
                "rgba(246,215,175,0.6)",
                "red",
                type,
                true
              );
            } else {
              this.$refs.mapv.addPolygon(
                [polygonStrData],
                data[i],
                data[i].mc,
                "rgba(246,215,175,0.6)",
                "red",
                type,
                false
              );
            }
          }
        }
      }
    },
    addPolygon(data, type, icon) {
      if (data[0].geom.indexOf("POINT") > -1) {
        for (var index in data) {
          data[index].location = data[index].geom
            .replaceAll("POINT(", "")
            .replaceAll(")", "")
            .split(" ");
        }
      } else if (data[0].geom.indexOf("POLYGON") > -1) {
        this.$refs.mapv.pointsMap[type] = [];
        for (var i in data) {
          var polygonStr = data[i].geom
            .replaceAll("POLYGON((", "")
            .replaceAll(")", "");
          var polygonStrArray = polygonStr.split(",");
          var polygonStrData = [];
          for (var j in polygonStrArray) {
            var obj = polygonStrArray[j].split(" ");
            obj[0] = Number(obj[0]);
            obj[1] = Number(obj[1]);
            polygonStrData.push(obj);
          }
          this.$refs.mapv.addPolygon(
            [polygonStrData],
            data[i],
            data[i].mc,
            "rgba(246,215,175,0.6)",
            "red",
            type
          );
        }
      }
    },
    kuzxd(data) {
      let polygonFeature = new Feature({
        geometry: new Polygon([data]),
      });
      let geo = polygonFeature.getGeometry();
      let center = getCenter(geo.getExtent());
      return center;
    },
  },
};
</script>

<style scoped></style>
